<template>
  <div class="padding-16">
    <a-spin :spinning="logState.spinning">
      <div class="log">
        <div class="search_box flex space_between">
          <div class="search">
            <a-select
              v-model:value="logState.history.form.printerFid"
              style="width: 100%"
              placeholder="选择打印机"
              :field-names="{
                label: 'printerName',
                value: 'fid'
              }"
              :options="logState.printOptions"
            ></a-select>
            &nbsp;
            &nbsp;
            <a-button @click="seach" type="primary">查询</a-button>
          </div>
          &nbsp;
          <div class="group_button">
            <a-button @click="reset">重置</a-button>
          </div>
        </div>
        <a-table :scroll="{ x: 0, y: 500 }" :dataSource="logState.history.dataSource"
          :loading="logState.history.loading" :pagination="logState.history.pagination" :columns="logState.column"
          size="small">
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'index'">
              <span>{{ index + 1 }}</span>
            </template>
            <template v-if="column.key === 'taskId'">
              <a-tooltip placement="topLeft">
                <template #title>
                  <span>{{ record.taskId }}</span>
                </template>
                {{ record.taskId }}
              </a-tooltip>
            </template>
            <template v-if="column.key === 'statua'">
              <span :style="{ color: record.statua == '1' ? 'red' : '' }">{{
                record.statua
                }}</span>
            </template>
          </template>
        </a-table>
      </div>
    </a-spin>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { column } from './column'
import api from '@renderer/api/log'
const userInfo = ref(null)
const logState = reactive({
  spinning: false,
  leftLoading: false,
  printOptions: [],
  column,
  addVisible: false,
  history: {
    form: {
      pageNum: 1,
      pageSize: 10,
      printStationId: '',
      printerFid: ''
    },
    dataSource: [],
    pagination: {
      current: 1,
      pageSize: 10,
      total: 0,
      defaultPageSize: 10,
      showQuickJumper: false,
      showSizeChanger: false,
      showTotal: (total) => {
        return `共 ${total} 条数据`;
      },
      pageSizeOptions: ['10', '15', '20'],
      onChange: (current) => {
        logState.history.pagination.current = current
        logState.history.form.pageNum = current
        getHistoryList()
      },
      onShowSizeChange: (pageIndex, pageSize) => {
        logState.history.pagination.pageSize = pageSize
        logState.history.form.pageSize = pageSize
        getHistoryList()
      }
    }
  },
  historySource: [],
  loginForm: {
    pinCode: ''
  }
})
const seach = () => {
  getHistoryList()
}
const reset = () => {
  logState.history.form.printerFid = ''
  seach()
}
const getPrint = async () => {
  logState.leftLoading = true
  window.api
    .fetchData(
      api.getPrinterList({ printStationId: userInfo.value.printStationId })
    )
    .then((res) => {
      if (res.code === 200) {
        logState.printOptions = res.data
      } else {
        message.error(res.data)
      }
    }
    ).finally(() => {
      setTimeout(() => {
        logState.leftLoading = false
      }, 1000)
    })
}

// 获取历史打印任务
const getHistoryList = () => {
  logState.history.loading = true
  window.api
    .fetchData(
      api.historyTask(
        JSON.parse(
          JSON.stringify({
            ...logState.history.form,
            printStationId: userInfo.value.printStationId
          })
        )
      )
    )
    .then((res) => {
      if (res.code === 200) {
        logState.history.dataSource = res.rows
        logState.history.pagination.total = res.total
      }
    })
    .finally(() => {
      setTimeout(() => {
        logState.history.loading = false
      }, 1000)
    })
}
onMounted(async () => {
  userInfo.value = await window.api.getStoreData('user-info')
  getPrint()
  seach()
})
</script>

<style lang="scss" scope>
@use './index.scss' as vars;
</style>
